<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS 伸缩布局综合示例</title>
  <style>
    /* 
        以下是 flex 布局常用属性说明（父元素上的属性）：
        2.flex-direction    调整主轴方向（默认为水平方向 ），子盒子如何在父盒子里面水平对齐方式 
        3.flex-wrap         控制是否换行，当我们子盒子内容宽度多于父盒子的时候如何处理 
        4.flex-flow         是 flex-direction、flex-wrap 的简写形式 
        5.justify-content   调整主轴对齐（水平对齐 ），子盒子如何在父盒子里面水平对齐方式 
        6.align-items       调整侧轴对齐（垂直对齐 ），子盒子如何在父盒子里面垂直对齐（单行） 
        7.align-content     由 flex-wrap 产生的独立行，多行垂直对齐方式 

        设置在子元素上的属性:
        1.flex: 1;         简写属性，1 代表每个伸缩项各占一份
                           flex 是 flex-grow、flex-shrink、flex-basis 的缩写 
                           flex: 1;  ==>  flex-grow:1; flex-shrink:1;  flex-basis:0%; 
        2.flex-grow        可以来扩展子元素的宽度，设置当前元素应该占据剩余空间的比例值 
        3.flex-shrink      定义收缩比例，通过设置的值来计算收缩空间（前提：子元素的宽度和超过父盒子的大小，并且没有设置... ）
        */

    /* 父元素（演示 align-content 相关 ）*/
    .box-align-content {
      width: 500px;
      height: 300px;
      background-color: red;
      /* 前提：这样这个 align-content 属性的设置才会起作用
         1.必须对父元素设置自由盒属性  display:flex; 
         2.并且设置排列方式为横向排列  flex-direction:row; 
         3.并且设置换行             flex-wrap:wrap; 
      */
      display: flex;
      flex-flow: row wrap;
      /* align-content: stretch;  默认值，让子元素的高度被拉伸以适应父容器（前提：子元素不设置高度） */
      /* align-content: center;    垂直方向居中 */
      align-content: space-between;  /* 上下盒子贴着父容器的顶端和底部，项目位于各行之间留有空白的容器内。 */
      /*align-content: space-around; /* 每个子盒子都添加上下 margin，项目位于各行之前、之间、之后都留有空白的容器内。 */
    }

    /* 子元素（演示 align-content 时的子元素 ）*/
    .box-align-content .item {
      width: 120px;
      height: 50px;
      background-color: pink;
      border: 1px solid black;
    }



    .f{
        width: 500px;
        height: 500px;
        background-color: aquamarine;
        display: flex;
        justify-content: center;/*水平位置居中*/
        align-items: center;/*垂直位置居中*/
    }
    .f .s{
        width: 200px;
        height: 200px;
        background-color: antiquewhite;
    }
  </style>
</head>

<body>


  <!-- 演示 align-content 布局效果 -->
  <div class="box-align-content">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  <div class="f">
    <div class="s">
    </div>
  </div>
</body>
</html>